<template>
  <div id="detail">
    <detail-nav-bar class="detail-nav-bar" @offsetTop="pushTo"/>
    <scroll class="content"  ref="scroll"
            :pull-up-load="true"
            @scroll="contentScroll" :probe-type="3">
      <detail-swiper :top-image="topImage"/>
      <detail-base-info :goods="goods"/>
      <detail-shop-info :shop="shop"/>
      <detail-goods-info :detail-info="detailInfo" />
      <detail-param-info :param-info="paramInfo" ref="params"/>
      <detail-comment-info :comment-info="commentInfo" ref="comment"/>
      <goods-list :goods="recommends" ref="recommend"/>
    </scroll>
    <back-top @click.native="backClick" v-show="isShowBackTop"/>
  </div>
</template>

<script>
import DetailNavBar from "@/views/detail/childComps/DetailNavBar";
import DetailSwiper from "@/views/detail/childComps/DetailSwiper";
import DetailBaseInfo from "@/views/detail/childComps/DetailBaseInfo";
import DetailShopInfo from "@/views/detail/childComps/DetailShopInfo";
import Scroll from "@/components/common/scroll/Scroll";
import DetailGoodsInfo from "@/views/detail/childComps/DetailGoodsInfo";
import DetailParamInfo from "@/views/detail/childComps/DetailParamInfo";
import DetailCommentInfo from "@/views/detail/childComps/DetailCommentInfo";
import GoodsList from "@/components/content/goods/GoodsList";
import backTop from "@/components/content/backTop/backTop";

import {getDetail,Goods,Shop,GoodsParam,getRecommend} from "@/network/detail";
import {debounce} from "@/common/utils";
import BackTop from "@/components/content/backTop/backTop";
export default {
  name: "Detail",
  components: {
    BackTop,
    GoodsList,
    DetailCommentInfo,
    DetailParamInfo, DetailGoodsInfo, Scroll, DetailShopInfo, DetailBaseInfo, DetailSwiper, DetailNavBar},
  data(){
    return{
      iid:null,
      topImage:[],
      goods: {},
      shop:{},
      detailInfo:{},
      paramInfo:{},
      commentInfo:{},
      recommends:[],
      isShowBackTop:false
    }
  },
  methods:{
    backClick(){
      this.$refs.scroll.bScrollTO(0,0)
    },
    contentScroll(position){
      //判断BackTop是否显示
      this.isShowBackTop=-(position.y)>1000

      //决定tabControl是否显示
      this.isTabShow=-(position.y)>this.tabOffsetTop
    },
    pushTo(index){
      if (index===0){
        this.$refs.scroll.bScrollTO(0,0)
      }else if (index===1){
        this.$refs.scroll.bScrollTO(0,-this.$refs.params.$el.offsetTop)
      }else if (index===2){
        this.$refs.scroll.bScrollTO(0,-this.$refs.comment.$el.offsetTop)
      }else if (index===3){
        this.$refs.scroll.bScrollTO(0,-this.$refs.recommend.$el.offsetTop)
      }
    }
  },
  created() {
    //1.保存传入的id
    this.iid=this.$route.params.iid
  //  2.根据传入的id去请求详情数据
    getDetail(this.iid).then(res=>{
      //获取数据
      const data=res.result;
      //1.获取顶部的图片轮播数据
      this.topImage=data.itemInfo.topImages
    //  2.获取商品信息
      this.goods=new Goods(data.itemInfo,data.columns,data.shopInfo.services)
    //  3.获取店铺信息
      this.shop=new Shop(data.shopInfo)
    //  4.保存商品的详情数据
      this.detailInfo=data.detailInfo
    //  5.获取参数信息
      this.paramInfo=new GoodsParam(data.itemParams.info,data.itemParams.rule)
    //  6.获取评论信息
      if (data.rate.cRate !==0){
        this.commentInfo=data.rate.list[0]
      }
    })
  //  3.请求推荐数据
    getRecommend().then(res=>{
      this.recommends=res.data.list
    })
  },
  mounted() {
    const newRefresh=debounce(this.$refs.scroll.refresh,200)
    this.$bus.$on('imageLoad',()=>{
      newRefresh()
    })
    this.$bus.$on('detailItemImageLoad',()=>{
      newRefresh()
    })
  }
}
</script>

<style scoped>
  #detail{
    position: relative;
    z-index: 9;
    background-color: white;
    height: 100vh;
  }
  .detail-nav-bar{
    position: relative;
    z-index: 10;
    background-color: white;
  }
  .content{
    height: calc(100% - 44px);
  }
</style>
